<template>
  <div id="editor" />
</template>
<script>
import '@opentiny/fluent-editor/style.css'
import 'highlight.js/styles/atom-one-dark.css'
import 'katex/dist/katex.min.css'
import 'quill-toolbar-tip/dist/index.css'
import highlight from 'highlight.js'
import Html2Canvas from 'html2canvas'
import katex from 'katex'
import QuillToolbarTip from 'quill-toolbar-tip'
import QuillMarkdownShortcuts from 'quill-markdown-shortcuts'
import FluentEditor, { generateToolbarTip } from '@opentiny/fluent-editor'

export default {
  name: 'tinyEdit',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    count: {
      type: Boolean,
      default: false
    },
    maxCount: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      editor: undefined,
      content: this.modelValue,
      toolbarConfig: [
        ['undo', 'redo', 'clean', 'format-painter'],
        [
          { header: [1, 2, 3, 4, 5, 6, false] },
          { font: [] },
          { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }
        ],
        ['bold', 'italic', 'strike', 'underline'],
        [{ color: [] }, { background: [] }],
        [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],
        ['link', 'blockquote', 'code', 'code-block'],
        ['image', 'file', 'better-table'],
        ['emoji', 'video', 'formula', 'screenshot']
      ]
    }
  },
  mounted() {
    FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
    FluentEditor.register('modules/markdownShortcuts', QuillMarkdownShortcuts)
    this.editor = new FluentEditor('#editor', {
      theme: 'snow',
      readOnly: this.disabled,
      modules: {
        toolbar: this.disabled ? false : this.toolbarConfig,
        'toolbar-tip': this.disabled
          ? undefined
          : {
              defaultTooltipOptions: {
                tipHoverable: false
              }
            },
        syntax: { hljs, highlight },
        'emoji-toolbar': true,
        file: true,
        counter: !this.disabled && this.count ? { count: this.maxCount } : false,
        i18n: { lang: 'zh-CN' },
        'better-table': {
          operationMenu: {
            color: {
              text: '主题色',
              colors: [
                '#ffffff',
                '#f2f2f2',
                '#dddddd',
                '#a6a6a6',
                '#666666',
                '#000000',
                '#c00000',
                '#ff0000',
                '#ffc8d3',
                '#ffc000',
                '#ffff00',
                '#fff4cb',
                '#92d050',
                '#00b050',
                '#dff3d2',
                '#00b0f0',
                '#0070c0',
                '#d4f1f5',
                '#002060',
                '#7030a0',
                '#7b69ee',
                '#1476ff',
                '#ec66ab',
                '#42b883'
              ]
            }
          }
        }
      }
      // screenshot: {
      //   Html2Canvas,
      //   beforeCreateImage(canvas) {
      //     return new Promise((resolve) => {
      //       canvas.toBlob(
      //         (data) => {
      //           if (!data) return
      //           const file = new File([data], `screenshot.png`, { type: 'image/jpeg' })
      //           // here can upload file to server. demo just use setTimeout to simulate
      //           setTimeout(() => {
      //             // return the final image url
      //             resolve('https://res.hc-cdn.com/tiny-vue-web-doc/3.18.9.20240902190525/static/images/mountain.png')
      //           }, 1000)
      //         },
      //         'image/png',
      //         1
      //       )
      //     })
      //   }
      // }
    })
    this.editor.root.innerHTML = this.content
    this.editor.on('text-change', () => {
      this.updateContent(this.editor.root.innerHTML)
    })
  },
  methods: {
    updateContent(content) {
      this.content = content
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.content = newValue
      }
    },
    content(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.$emit('update:modelValue', newValue)
      }
    }
  },
  setup() {
    window.hljs = highlight
    window.katex = katex
    window.Html2Canvas = Html2Canvas
  }
}
</script>
<style>
.ql-screenshot-cutter {
  z-index: 9999;
}
.ql-screenshot-mask {
  z-index: 9999;
}
</style>
